<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>战斗测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background: #f0f0f0;
        }
        .test-container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .battle-area {
            display: flex;
            gap: 20px;
            margin: 20px 0;
        }
        .enemy-area, .player-area {
            flex: 1;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 10px;
        }
        .enemy {
            background: #ff6b6b;
            color: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
        }
        .card {
            background: #4CAF50;
            color: white;
            padding: 10px;
            border-radius: 5px;
            margin: 5px;
            cursor: pointer;
            display: inline-block;
        }
        .card:hover {
            background: #45a049;
        }
        .stats {
            background: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .test-button {
            background: #2196F3;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .test-button:hover {
            background: #1976D2;
        }
    </style>
</head>
<body>
    <div class="test-container">
        <h1>战斗系统测试</h1>
        
        <div class="stats">
            <h3>玩家状态</h3>
            <div>生命值: <span id="player-health">100</span></div>
            <div>能量: <span id="player-energy">3</span></div>
            <div>金币: <span id="player-gold">0</span></div>
        </div>
        
        <div class="battle-area">
            <div class="enemy-area">
                <h3>敌人</h3>
                <div id="enemy-container">
                    <!-- 敌人将在这里显示 -->
                </div>
            </div>
            
            <div class="player-area">
                <h3>手牌</h3>
                <div id="player-hand">
                    <!-- 手牌将在这里显示 -->
                </div>
            </div>
        </div>
        
        <div>
            <button class="test-button" onclick="startTest()">开始测试</button>
            <button class="test-button" onclick="resetTest()">重置测试</button>
            <button class="test-button" onclick="endTurn()">结束回合</button>
        </div>
        
        <div id="log" style="background: #f0f0f0; padding: 10px; margin-top: 20px; border-radius: 5px;">
            <h3>战斗日志</h3>
            <div id="log-content"></div>
        </div>
    </div>

    <script>
        // 简化的战斗测试
        let testGame = {
            player: {
                health: 100,
                maxHealth: 100,
                energy: 3,
                maxEnergy: 3,
                gold: 0
            },
            currentEnemies: [],
            playerHand: [],
            battleLog: []
        };

        function startTest() {
            // 创建敌人
            testGame.currentEnemies = [{
                name: '数学考试',
                health: 60,
                maxHealth: 60,
                damage: 8
            }];
            
            // 创建手牌
            testGame.playerHand = [
                { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' },
                { name: '重击', cost: 2, type: 'attack', damage: 12, description: '造成12点伤害' }
            ];
            
            updateDisplay();
            addLog('测试开始！');
        }

        function resetTest() {
            testGame.player.health = 100;
            testGame.player.energy = 3;
            testGame.player.gold = 0;
            testGame.currentEnemies = [];
            testGame.playerHand = [];
            testGame.battleLog = [];
            updateDisplay();
            addLog('测试重置！');
        }

        function useCard(card) {
            if (testGame.player.energy < card.cost) {
                addLog('能量不足！');
                return;
            }

            testGame.player.energy -= card.cost;
            addLog(`使用卡牌: ${card.name} (消耗${card.cost}能量)`);

            if (card.type === 'attack') {
                dealDamage(card.damage);
            } else if (card.type === 'defend') {
                addLog(`获得${card.block}点护甲`);
            }

            // 从手牌中移除
            const cardIndex = testGame.playerHand.indexOf(card);
            if (cardIndex > -1) {
                testGame.playerHand.splice(cardIndex, 1);
            }

            updateDisplay();

            if (testGame.player.energy <= 0) {
                addLog('能量耗尽，自动结束回合');
                endTurn();
            }
        }

        function dealDamage(damage) {
            if (testGame.currentEnemies.length > 0) {
                const target = testGame.currentEnemies[0];
                target.health -= damage;
                
                if (target.health < 0) {
                    target.health = 0;
                }
                
                addLog(`对 ${target.name} 造成了 ${damage} 点伤害`);
                
                if (target.health <= 0) {
                    addLog(`击败了 ${target.name}！`);
                    testGame.currentEnemies = [];
                }
            }
            
            updateDisplay();
        }

        function endTurn() {
            addLog('结束回合');
            
            // 敌人行动
            testGame.currentEnemies.forEach(enemy => {
                if (enemy.health > 0) {
                    testGame.player.health -= enemy.damage;
                    addLog(`${enemy.name} 对玩家造成了 ${enemy.damage} 点伤害`);
                }
            });
            
            // 重置玩家状态
            testGame.player.energy = testGame.player.maxEnergy;
            
            // 重新抽牌
            testGame.playerHand = [
                { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                { name: '攻击', cost: 1, type: 'attack', damage: 6, description: '造成6点伤害' },
                { name: '防御', cost: 1, type: 'defend', block: 5, description: '获得5点护甲' }
            ];
            
            updateDisplay();
            
            if (testGame.player.health <= 0) {
                addLog('游戏结束！');
            }
        }

        function updateDisplay() {
            // 更新玩家状态
            document.getElementById('player-health').textContent = testGame.player.health;
            document.getElementById('player-energy').textContent = testGame.player.energy;
            document.getElementById('player-gold').textContent = testGame.player.gold;
            
            // 更新敌人显示
            const enemyContainer = document.getElementById('enemy-container');
            enemyContainer.innerHTML = '';
            
            testGame.currentEnemies.forEach(enemy => {
                const enemyElement = document.createElement('div');
                enemyElement.className = 'enemy';
                enemyElement.innerHTML = `
                    <div><strong>${enemy.name}</strong></div>
                    <div>生命: ${enemy.health}/${enemy.maxHealth}</div>
                    <div>伤害: ${enemy.damage}</div>
                `;
                enemyContainer.appendChild(enemyElement);
            });
            
            // 更新手牌显示
            const handContainer = document.getElementById('player-hand');
            handContainer.innerHTML = '';
            
            testGame.playerHand.forEach(card => {
                const cardElement = document.createElement('div');
                cardElement.className = 'card';
                cardElement.innerHTML = `
                    <div><strong>${card.name}</strong></div>
                    <div>消耗: ${card.cost}</div>
                    <div>${card.description}</div>
                `;
                cardElement.addEventListener('click', () => {
                    useCard(card);
                });
                handContainer.appendChild(cardElement);
            });
        }

        function addLog(message) {
            const logContent = document.getElementById('log-content');
            const logEntry = document.createElement('div');
            logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
            logContent.appendChild(logEntry);
            logContent.scrollTop = logContent.scrollHeight;
        }

        // 初始化显示
        updateDisplay();
    </script>
</body>
</html>
